<template>
  <div class="container">
    <el-card>
      <!-- 搜索区域 -->
      <el-row :gutter="20">
        <el-col :span="6" class="subjectsName">
          <span>学科名称</span>
          <el-input v-model="queryList.subjectName"></el-input>
        </el-col>
        <el-col :span="6">
          <el-button @click="clearSubjects">清除</el-button>
          <el-button type="primary" @click="getSubjectsList()">搜索</el-button>
        </el-col>
        <el-col :span="3" class="addSubjects">
          <el-button
            type="success"
            icon="el-icon-edit"
            @click="addSubjectsDialogVisible = true"
            >新增学科</el-button
          >
        </el-col>
      </el-row>

      <!-- 提示栏 -->
      <el-alert
        :title="'数据一共' + counts + '条'"
        type="info"
        show-icon
        :closable="false"
      >
      </el-alert>

      <!-- 表格区域 -->
      <template>
        <el-table style="width: 100%" :data="list">
          <el-table-column label="序号" type="index"> </el-table-column>
          <el-table-column label="学科名称" prop="subjectName" width="150">
          </el-table-column>
          <el-table-column label="创建者" prop="username" width="150"> </el-table-column>
          <el-table-column label="创建日期" width="220">
            <template slot-scope="scope">
              <span>{{ scope.row.addDate | parseTimeByString
 }}</span>
            </template>
          </el-table-column>
          <el-table-column label="前台是否显示" prop="isFrontDisplay">
            <template slot-scope="scope">
              <span v-if="scope.row.isFrontDisplay === 1">是</span>
              <span v-else>否</span>
            </template>
          </el-table-column>
          <el-table-column
            label="二级目录"
            prop="twoLevelDirectory"
          ></el-table-column>
          <el-table-column label="标签" prop="tags"> </el-table-column>
          <el-table-column label="题目数量" prop="totals"></el-table-column>
          <el-table-column label="操作" align="center" width="300">
            <template slot-scope="scope">
              <el-link type="primary" :underline="false" @click="$router.push({ path: '/subjects/directorys',query: {id:scope.row.id,name:scope.row.subjectName}})">学科分类</el-link>
              <el-link type="primary" :underline="false" @click="$router.push({path:'/subjects/tags',query: {id:scope.row.id,name:scope.row.subjectName}})">学科标签</el-link>

              <el-link
                type="primary"
                :underline="false"
                @click="updateSubjects(scope.row)"
                >修改</el-link
              >
              <el-link
                type="primary"
                :underline="false"
                @click="deleteSubjects(scope.row)"
                >删除</el-link
              >
            </template>
          </el-table-column>
        </el-table>
      </template>

      <!-- 分页器区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryList.page"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="queryList.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="counts"
      >
      </el-pagination>

      <!-- 添加学科弹出框 -->
      <el-dialog
        title="添加学科"
        :visible.sync="addSubjectsDialogVisible"
        minwidth="25%"
      >
        <subjects-add
          v-if="addSubjectsDialogVisible"
          @close="addSubjectsDialogVisible = $event"
          @update="getSubjectsList"
        ></subjects-add>
      </el-dialog>

      <!-- 修改学科弹出层 -->
      <el-dialog
        title="修改学科"
        :visible.sync="updateSubjectsDialogVisible"
        minwidth="25%"
      >
        <subjects-update
          v-if="updateSubjectsDialogVisible"
          :data="data"
          @close="updateSubjectsDialogVisible = $event"
          @update="getSubjectsList()"
        ></subjects-update>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { list, remove } from '@/api/hmmm/subjects'
import SubjectsAdd from '@/module-hmmm/components/subjects-add'
import SubjectsUpdate from '@/module-hmmm/components/subjects-update'
export default {
  name: 'Subjects',
  components: {
    'subjects-add': SubjectsAdd,
    'subjects-update': SubjectsUpdate
  },
  props: {},
  data () {
    return {
      queryList: {
        page: 1,
        pagesize: 10,
        subjectName: ''
      },
      // 学科列表数据
      list: [],
      // 数据总条数
      counts: 0,
      // 控制添加学科弹出框状态
      addSubjectsDialogVisible: false,
      // 控制修改学科弹出框状态
      updateSubjectsDialogVisible: false,
      data: {}
    }
  },
  created () {
    this.getSubjectsList()
  },
  mounted () {},
  methods: {
    // 获取学科列表
    async getSubjectsList () {
      try {
        const { data: res } = await list(this.queryList)
        this.list = res.items
        this.counts = res.counts
      } catch (error) {
        this.$message('获取数据失败')
      }
    },

    handleSizeChange (newSize) {
      this.queryList.pagesize = newSize
      this.getSubjectsList()
    },

    handleCurrentChange (newPage) {
      this.queryList.page = newPage
      this.getSubjectsList()
    },

    // 清除 input
    clearSubjects () {
      this.queryList.subjectName = ''
      this.getSubjectsList()
    },

    // 删除学科
    async deleteSubjects (data) {
      const result = await this.$confirm(
        '此操作将永久删除该文件, 是否继续?',
        '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch((err) => err)
      if (result !== 'confirm') {
        return this.$message.info('取消删除')
      }
      const res = await remove(data)

      if (res.status !== 200) {
        this.$message('删除失败')
      }
      // 更新视图
      this.getSubjectsList()
      this.$message.success('删除成功')
    },

    updateSubjects (data) {
      this.data = data
      this.updateSubjectsDialogVisible = true
    }
  },
  computed: {},
  watch: {},
  filters: {}
}
</script>

<style lang="scss" scoped>
.container {
  .subjectsName {
    display: flex;
    font-weight: 500;
    span {
      line-height: 33px !important;
      margin-right: 10px;
      color: #000;
    }
    .el-input {
      width: 300px;
    }
  }

  .addSubjects {
    float: right;
  }

  .el-alert {
    margin: 16px 0 !important;
  }
  .el-pagination {
    float: right !important;
    margin: 20px 30px 20px 0;
  }
  .cell {
    a {
      color: #459eff;
      margin-right: 5px;
    }
  }
}
</style>
